<script setup>
import { ref, reactive, onMounted, getCurrentInstance, computed } from "vue";
import { useRouter } from "vue-router";

import api from "@/api";


const route = useRouter();
const { proxy } = getCurrentInstance();

const treeData = ref([
    {
        label: 'BIM工艺模拟',
        id: 0,
        children: [
           {}
        ],
        status: '进行中'
    }, {
        label: '机房方案深化',
        id: 1,
        children: [
            {}
        ],
        status: '进行中'
    }, {
        label: '现状数据采集',
        id: 2,
        children: [
            {}
        ],
        status: '进行中'
    }, {
        label: 'AR验核',
        id: 3,
        children: [
            {}
        ],
        status: '进行中'
    }, {
        label: '管井质量控制',
        id: 4,
        children: [
            {}
        ],
        status: '进行中'
    }, {
        label: '施工进度模拟',
        id: 5,
        children: [
            {}
        ],
        status: '已完成'
    }, {
        label: '图纸校核',
        id: 6,
        children: [
            {}
        ],
        status: '进行中'
    }, {
        label: '机电管综优化出图',
        id: 7,
        children: [
            {}
        ],
        status: '已完成'
    }, {
        label: '支吊架深化',
        id: 8,
        children: [
            {}
        ],
        status: '进行中'
    }, {
        label: '施工场地布置',
        id: 9,
        children: [
            {}
        ],
        status: '已完成'
    }, {
        label: '成本管控分析',
        id: 10,
        children: [
            {}
        ],
        status: '进行中'
    }, {
        label: '项目宣传片',
        id: 11,
        children: [
            {}
        ],
        status: '进行中'
    }
])

const getStatusCls = computed(() => (item) => {
    return item === '进行中' ? 'progress' : item === '已完成' ? 'done' : 'other'
});

const handleNodeClick = function (node1, node2) {

}

onMounted(() => {
});
</script>

<template>
    <div class="container">
        <!-- <div class="site-overview">
            <div class="title">
                <span>今日现场概况</span>
            </div>
            <div class="tree-container">
                <div class="desc">
                    <div class="name">应用点名称</div>
                    <div class="status">状态</div>
                </div>
                <el-tree :data="treeData" @node-click="handleNodeClick">
                    <template #default="{ node, data }">
                        <span class="custom-tree-node" :style="`width:${210 - (node.level - 1) * 18}px`">
                            {{ node.label }}
                        </span>
                        <span class="custom-tree-status" :class="getStatusCls(data.status)">
                            {{ data.status }}
                        </span>
                    </template>
                </el-tree>
            </div>
        </div> -->
        <div class="model-view">
            <iframe src="http://share-xt.hwbim.com/xtvue/index_xt.html#/shareissue?shareId=5a90bc91575841929fb55c3c76627400" frameborder="no"></iframe>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: calc(100vh - 80px);
    font-family: SourceHanSansSC;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    color: #656565;

    .site-overview {
        width: 350px;
        height: calc(100vh - 85px);
        border: 1px solid #dce3ef;
        box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
        border-radius: 6px;
        background: #ffffff;

        .title {
            width: 200px;
            height: 20px;
            border-left: 3px #8f93f7 solid;
            font-weight: bold;
            padding-left: 10px;
            margin: 10px;
        }

        .tree-container {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;

            .desc {
                width: 100%;
                height: 40px;
                line-height: 40px;
                background: #ecedff;
                display: flex;
                justify-content: space-between;
                font-weight: bold;

                >div {
                    width: 130px;
                    text-align: center;
                }
            }

            :deep .el-tree {
                width: 100%;
                height: calc(100vh - 185px);
                overflow-x: hidden;
                overflow-y: auto;
                margin: auto;

                .el-tree-node,
                .el-tree-node__content {
                    min-height: 40px;

                    .el-tree-node__expand-icon:not(.is-leaf) {
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        background-image: url("@/assets/images/bim/add.png");
                        padding: 0px;
                        font-size: 15px;
                        margin: 0px 5px;

                        svg {
                            width: 0px;
                        }
                    }

                    .el-tree-node__expand-icon {
                        margin-left: 10px !important;
                    }
                }

                >div:nth-child(even) {
                    background: #E5E5E5;
                }

                .el-tree-node__content:hover,
                .el-tree-node__content:focus {
                    background: unset;
                }

                .custom-tree-node {
                    width: 215px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .custom-tree-status {
                    font-size: 13px;
                }

                .progress {
                    color: #10C662;
                }

                .done {
                    color: #39C0FF;
                }
            }

        }
    }

    .model-view {
        //width: calc(100% - 350px);
        width: 100%;
        height: calc(100vh - 90px);
        //margin-left: 10px;

        iframe {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
